<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <script>
      const lis = document.querySelectorAll('li')

      var a = 1

      function fn(x, y, m, n) {
        console.log(this.a)
        console.log(x)
        console.log(y)
        console.log(m)
        console.log(n)
      }

      const obj = {
        a: 'redHead',
      }

      //   fn.apply(obj, lis)

      //   fn()

      //call可以改变this的指向 ,并且调用函数 , 其他的参数一个一个传参即可
      fn.call(obj, ...lis)

      //apply 也可以改变this的指向，并且调用函数 , 其他参数只接收数组形式的

      //   fn.apply(obj, [2, 3])

      //1.创对象
      //   const obj = {}
      //2.改原型
      // obj.__proto__ = Star.prototype
      //3.改this，调函数
      //   Star.call(obj,uname,age,...)
      //   Star.apply(obj, arguments)
      //4.return
    </script>
  </body>
</html>
